<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>进度条</title>
	<style>
	body,html{
		width:100%;
		height:100%;
		padding:0;
		margin:0;
	}
	img{
		width:100%;
	}
		.loading{
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background: #fff;
		}
		.load{
			position: absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			margin:auto;
			width:160px;
			height:20px;
			background: url('image/30.gif');
		}
	</style>
</head>
<script src="js/jquery1.42.min.js"></script>
<script>
$(function(){
	//进度条加载
	document.onreadystatechange=function(){
		if(document.readyState=="complete"){
			$('.loading').fadeOut();
		}
	}
})
</script>
<body>
<div class="loading">
	<div class="load"></div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1193418232,3244632658&fm=26&gp=0.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502521984&di=f8c700d0e76d3133bee2e233edb0368b&imgtype=jpg&er=1&src=http%3A%2F%2Fstatic10.photo.sina.com.cn%2Fmiddle%2F5a3ab1b1x9961016a8699%26amp%3B690" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501927241949&di=f4a47bcde4c9620aa781162e7c476d26&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D99bd7ae7a551f3ded7bfb127fc879a6a%2Fb58f8c5494eef01f3e82aae8eafe9925bc317d0c.jpg" alt="">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501927241949&di=906e8001068b7948c1ae7401fcfc2d04&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201702%2F22%2F1005a2e0825ffe290b3f697404ee8038.jpg" alt="">
</body>
</html>